<template>
  <div class="project-list">
    <div class="relation-data-title">
      <div>{{ data.subject }}</div>
      <span v-if="data.showMore"
        class="title-more"
        :href="moreUrl"
        @click="open"
        target="_blank"
        style="font-weight: 500;">{{ moreLabel }}</span>
    </div>
    <ul>
      <li v-for="item in list" :key="item.id" @click="onItemClick(item)">
        <i class="dot"></i>
        <i class='ico16 ico16 icon_group_16'></i>
        <div class="doc-name">{{ item.projectName }}</div>
      </li>
    </ul>
  </div>
</template>

<script>
  import globalData from '@/plugins/data';
  import mixins from '../mixins';
  import globalMethods from "@/plugins/methods";
  export default {
    name: 'ProjectList',
    mixins: [mixins],
    computed: {
      moreUrl() {
        return `${globalData.ctxPath}/projectandtask.do?method=projectAndTaskIndex&pageType=project&_resourceCode=F02_projecttask&showTab=true`;
      }
    },
    data() {
      return {
        moreLabel: this.$i18n('common.more.label')
      };
    },
    methods: {
      open() {
        getCtpTop().openCtpWindow({
          url: this.moreUrl
        });
      },
      onItemClick(item) {
        const url = `${globalData.ctxPath}/project/project.do?method=projectSpace&projectId=${item.id}&showTab=true`
        getCtpTop().openCtpWindow({ url,sectionName:globalMethods.i18n('space.default.project.label') })
      }
    }
  };
</script>
<style lang="scss" scoped>
  .project-list {
    > ul {
      font-size: 14px;
      margin-bottom: 10px;
      > li {
        height: 30px;
        font-size: 14px;
        padding: 5px;
        margin-top: 5px;
        display: flex;
        align-items: center;
        &:hover {
          background-color: #e6f6ff;
          cursor: pointer;
          .dot,
          .doc-name {
            color: var(--theme-brand6, #2490f8);
          }
        }
      }
      .dot {
        margin-right: 12px;
        width: 6px;
        height: 6px;
        background-color: #0077FF;
        background-color: var(--theme-brand6, #0077FF);
        border-radius: 50%;
      } 
      .doc-name {
        max-width: 250px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
    }
  }
</style>
